<template>
  <div class="chart-theme-color">
    <el-card
      v-for="(value, key) in comChartColors"
      :key="key"
      class="card-box"
      :class="{ selected: key === selectName }"
      @click="selectTheme(key)"
    >
      <div class="flex-items-center">
        <span class="theme-color-title">{{ value.name }}</span>
        <span
          class="theme-color-item"
          v-for="colorItem in fetchShowColors(value.color)"
          :key="colorItem"
          :style="{ backgroundColor: colorItem }"
        ></span>
      </div>
      <div
        class="theme-bottom"
        :style="{ backgroundImage: colorBackgroundImage(value) }"
      ></div>
    </el-card>
  </div>
</template>

<script setup name="ChartThemeColor">
import { computed } from "vue";
import { useStore } from "vuex";
import { colorCustomMerge } from "@/utils";
import { cloneDeep } from "lodash";

const store = useStore();
const chartEditStore = computed(() => store.state.chartEditStore);

// 合并默认颜色和自定义颜色
const comChartColors = computed(() => {
  return colorCustomMerge(chartEditStore.value.chartCustomThemeColorInfo);
});

// 颜色
const themeColor = computed(() => {
  return store.getters["designStore/appTheme"];
});

// 选中名称
const selectName = computed(() => {
  return store.getters["chartEditStore/getEditCanvasConfig"].chartThemeColor;
});

// 底色
const colorBackgroundImage = (item) => {
  return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`;
};

// 获取用来展示的色号
const fetchShowColors = (colors) => {
  return cloneDeep(colors).splice(0, 6);
};

// 设置主体色（在 ContentEdit > List 中进行注入）
const selectTheme = (theme) => {
  store.commit("chartEditStore/SET_CHART_THEME_COLOR", theme);
};
</script>

<style lang="scss" scoped>
$radius: 10px;
$itemRadius: 6px;
.chart-theme-color {
  font-size: 14px;
  .card-box {
    cursor: pointer;
    margin-top: 15px;
    padding: 0;
    border-radius: $radius;
    overflow: hidden;

    &.selected {
      border: 2px solid v-bind("themeColor");
    }
    &:first-child {
      margin-top: 5px;
    }
    .flex-items-center {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: -4px;
    }
    .theme-color-item {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: $itemRadius;
    }
    .theme-bottom {
      position: absolute;
      left: 0;
      bottom: 0px;
      width: 100%;
      height: 3px;
    }
  }
  :deep(.el-card__body) {
    padding: 10px;
  }
}
</style>
